<template>
  <div>
    <span>输入成员：</span>
    <a-space direction="vertical">
      <a-input type="text"
               v-model:value="nameInput"
               placeholder="请输入名称"
               @keyup.enter="submit" />
    </a-space>
  </div>
  <br />
  <div>
    <span>成员有：</span>
    <!-- <ul v-for="(item,key,index) in store.member"
        :key="key">
      <li>{{ item }}{{ index }}</li>
    </ul> -->
    <a-list size="small">
      <template v-for="(item,key,index) in store.member"
                :key="index">
        <a-list-item :data-index="index">
          <a-checkbox v-model:checked="checked">{{ item }}</a-checkbox>

          <a-button type="link"
                    v-show="!checked"
                    @click="showModal(item,key)">修改</a-button>
          <a-button danger
                    type="text"
                    @click="store.deleteMeber(item)">删除</a-button>
        </a-list-item>
      </template>
    </a-list>
    <span>一共有{{store.getCount}}位成员</span>
  </div>
  <br />
  <div>
    <a-button @click="reset">恢复数据</a-button>
  </div>
  <!-- <div>
    <button @click="test">测试</button>
  </div> -->
  <a-modal v-model:open="open"
           title="修改名字"
           @ok="handleOk">
    <a-input v-model:value="currentName"></a-input>
  </a-modal>

</template>

<script lang="ts" setup>
import { baseParamStore } from '/@/store/modules/base'
import { ref } from 'vue'
const open = ref<boolean>(false)
const currentName = ref<string>('')
const currentIndex = ref(0)
const checked = ref(false)

const store = baseParamStore()
const nameInput = ref<string>('')

const showModal = (name: string, index: number) => {
  open.value = true
  currentName.value = name
  currentIndex.value = index
}

const handleOk = () => {
  open.value = false
  store.member[currentIndex.value] = currentName.value
}

// 提交修改数据
const submit = () => {
  store.addMember(nameInput.value)
  nameInput.value = ''
}

// 初始化数据
const reset = () => {
  store.$reset()
  nameInput.value = ''
}

// function test() {
//   const set = new Set([])
//   console.log([...set], set.size)
// }
</script>